<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        .swiper {
            width: 100%;
            height: 500px;
            position: relative;
        }

        #fenye {
            position: absolute;
            left: 400px;
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            border: 2px solid white;
            background: grey;


        }

        .swiper-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 60px;
            height: 60px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border: 1px solid grey;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.1);
            font-size: 5px;
            color: #fff;

        }


        .swiper-button-prev:after {
            content: 'prev';
            font-size: 12px;
        }

        .swiper-button-prev {
            left: 440px;
        }

        .swiper-button-next:after {
            content: 'next';
            font-size: 12px;
        }

        .swiper-button-next {
            right: 40px;
        }

        .swiperNav {

            width: 230px;
            height: 460px;
            position: absolute;
            top: 20px;
            left: 300px;
        }
    </style>
</head>

<body>

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./lunbo1.png" alt=""></div>
            <div class="swiper-slide"><img src="./lunbo2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./lunbo3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./lunbo4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./lunbo5.png" alt=""></div>
            <div class="swiper-slide"><img src="./lunbo6.jpg" alt=""></div>

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" id="fenye"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <div class="swiperNav">
            <ul class="warpNar">
                <li><span></span>手机<span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
                <li><span></span><span>&lg;</span></li>
            </ul>

        </div>
    </div>


    <script src="./js/swiper-bundle.min.js"></script>



</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            pauseOnMouseEnter: true,
            disableOnInteraction: false
        },//可选选项，自动滑动
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: true,
            hiddenClass: 'my-button-hidden',
        }

    })




    var foo = 'get-element-by-id';
    function combo(msg) {
        var arr = msg.split('-');  //  分割成字符串数组
        for (var i = 1; i < arr.length; i++) {
            //  charAt()返回指定位置的字符 toUpperCase() 方法用于把字符串转换为大写。substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
            arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
        }
        msg = arr.join("");
        return msg;
        
    }
    
    console.log(combo(foo));

</script>


</html>